import classNames from 'classnames'
import s from './SelectionTag.module.less'

export function SelectionTags<T>(props: {
  selectedId: T
  selection: T[]
  getLabel(id: T): string
  onSelect(id: T): void
}) {
  return (
    <>
      {props.selection.map((v) => {
        return (
          <span
            key={props.getLabel(v)}
            onClick={() => {
              props.onSelect(v)
            }}
            className={classNames([
              s.selectionTag,
              v === props.selectedId && s.selectionTagSelected
            ])}
          >
            {props.getLabel(v)}
          </span>
        )
      })}
    </>
  )
}
